<template>
	<div class="banner">		
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city">
					<router-link to="/city">
					<label>{{cityName}}</label><i class="iconfont">&#xe600;</i>
					</router-link>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe616;</i>
					<input type="text" placeholder="国内秋色盘点大全" />
				</form>
			</div>
			<!-- 热搜 -->
			<div class="hot">
				<ul>
					<li>热搜</li>
					<li>赏银杏</li>
					<li>赏枫叶</li>
					<li>秋日骑行</li>
					<li>温泉滑雪</li>
				</ul>
			</div>
			<div class="yellow"></div>
			<!-- 轮播区域 -->
			<div class="swiper banner-swpier">
			  <ul class="swiper-wrapper">
			    <li class="swiper-slide">
					<img src="../../../../public/youxiake_banner/1.jpg" title="开路先锋"/>
					<p class="title">开路先锋</p>
				</li>
			    <li class="swiper-slide">
					<img src="../../../../public/youxiake_banner/2.jpg" />
				</li>
			    <li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/3.jpg"/>
				</li>
				<li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/4.jpg"/>
				</li>
				<li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/5.jpg"/>
				</li>
				<li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/6.jpg"/>
				</li>
				<li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/7.jpg"/>
				</li>
				<li class="swiper-slide">
					<img  src="../../../../public/youxiake_banner/8.jpg"/>
				</li>
			  </ul>
			  <div class="swiper-pagination"></div>	<!-- 分页器。如果放置在swiper外面，需要自定义样式 -->
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	import {onMounted} from 'vue';
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper';
	
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Banner',
		setup(){
			onMounted( ()=>{
				new Swiper('.banner-swpier' , {
					loop : true,
					pagination:{
						el:'.swiper-pagination'
					},
					autoplay:{
						delay:3000,
						stopOnLastSlide:false,
						disableOnInteraction:false,
					}
				})
			})
		},
		data(){
			return{
				
			}
		},
		computed:{
			...mapState(['cityName'])
		},
		
		methods:{
			
		}
	}
</script>

<style scoped>
	.banner{
		height: 6.5rem;
	}
	.main{
		position: relative;
		width: 100%;
		height: 5rem;
	}
	.banner-top{
		/* position: absolute;
		left: 0;
		top: 0.2rem; */
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		line-height: 0.8rem;
	}
	.banner-top .city{
		color: black;
		font-weight: bold;
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		width: 20%;		
		z-index: 1;
		padding-top: 0.2rem;
	}
	.banner-top .city i{
		vertical-align: middle;
		padding-left: 0.2rem;
		padding-right: 0.1rem;
	}
	.banner-top .search{
		flex: 1;
		border-radius: 0.3rem;
		overflow: hidden;
		line-height: 0.7rem;
		background-color: white;
		width: 78%;
		margin-right: 0.5rem;
		text-align: right;
		z-index: 1;
		margin-top: 0.2rem;
	}
	.banner-top .search i{
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.3rem;
		vertical-align: middle;
		z-index: 1;
		float: left;
		padding-top: 0.04rem;
	}
	.banner-top .search input{
		border: none;
		width: 80%;
		line-height: 0.6rem;
		text-indent: 1em;
		outline: none;
		vertical-align: middle;
		float: left;
		padding-top: 0.1rem;
	}
	 .hot{
		width: 100%;
		position: absolute;
		z-index: 5;		
		margin-top: 0.25rem;
	}
	 .hot ul{
		line-height: 0.5rem;
		width: 100%;
	}
	 .hot ul li{
		float: left;
		background-color: #ffeea0;
		font-weight: bold;
		width: 19%; 
		line-height: ;
		border-radius: 0.5rem;
		text-align: center;
		margin-left: 0.2rem;
	}
	.hot ul li:first-child{
		background-color: gold;
		width: 10%; 
	}
	.yellow{
		width: 100%;
		height: 5.4rem;
		background-color: gold;
		position: relative;
		top: -1.1rem ;
	}
	.banner-swpier{
		width: 100%;
		height: 4.5rem;
		position: relative;
		top: -4.4rem;
		z-index: 10;
	}
	.banner-swpier img{
		width: 95%;
		height: 100%;
		display: flex;
		border-radius: 0.4rem;
		margin: 0rem auto;
	}
	.banner-swpier img title{
		position: relative;
		    margin: 2.1rem auto .04rem;
		    font-size: 0.32rem;
		    font-weight: bold;
		    z-index: 10;
	}
	/* 穿透
	/* .swiper-pagination .swiper-pagination-bullet-active{
		background-color: orange;
	} */
	.city label{
		text-decoration: none;
		color: #000000;
		border: none;
	}
	.city i{
		text-decoration: none;
		border: none;
		color: #000000;
	}
 </style>
